<template>
  <div class="ty-container">
    <div class="addBtn" @click="toAddTestInfo" v-if="isAdd">
      <van-icon name="plus" />
    </div>
    <van-nav-bar
      :title="title"
      left-arrow
      fixed
      :border="false"
      @click-left="clickLeft"
      @click-right="clickRight"
    >
      <!-- <template #right>
        <van-icon name="filter-o" size="24" />
      </template> -->
    </van-nav-bar>
    <div class="content">
      <div class="search">
        <van-search
          v-model="searchValue"
          show-action
          placeholder="请输入搜索关键词"
          left-icon="none"
        >
          <template #action>
            <div style="color: #1e9fff" @click="onSearch">查询</div>
          </template>
        </van-search>
      </div>
      <van-list
        :immediate-check="false"
        :offset="1"
        :finished="finished"
        finished-text="暂无数据"
      >
        <van-swipe-cell v-for="(v, i) in list" :key="i" ref="swipecell">
          <van-cell
            title-class="custom-title"
            value-class="custom-value"
            label-class="custom-label"
            :title="v.MaterialName"
          >
            <template #default>
              <van-tag v-if="v.State == 1" type="primary">待提交</van-tag>
              <van-tag v-else-if="v.State == 2" type="warning">已撤回</van-tag>
              <van-tag v-else-if="v.State == 3" type="warning">已驳回</van-tag>
              <van-tag v-else-if="v.State == 4" type="success"
                >提交完成</van-tag
              >
            </template>
            <template #label>
              <div>批号：{{ v.BatchID }}</div>
              <div>请验部门：{{ v.DepartName }}</div>
              <div>请验日期：{{ v.VerifyDate }}</div>
              <div>紧急程度：{{ v.UrgencyName }}</div>
              <div>是否送样：{{ v.IsGiveSampleName }}</div>
            </template>
          </van-cell>
          <template #right>
            <van-button
              v-if="v.IsBack"
              loading-text=" "
              square
              block
              type="warning"
              text="撤回"
              style="height: 100%"
              @click="callBack(v)"
            />
            <van-button
              v-if="v.IsDelete"
              loading-text=" "
              square
              block
              type="danger"
              text="删除"
              style="height: 100%"
              @click="deleteInfo(v)"
            />
            <van-button
              v-if="v.IsSumbit"
              loading-text=" "
              square
              block
              type="info"
              text="提交"
              style="height: 50%"
              @click="submitInfo(v)"
            />
            <van-button
              v-if="v.IsReject"
              loading-text=" "
              square
              block
              type="warning"
              text="驳回"
              style="height: 50%"
              @click="rejectInfo(v)"
            />
          </template>
        </van-swipe-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import {
  Field,
  Col,
  Row,
  NavBar,
  Icon,
  Sidebar,
  SidebarItem,
  List,
  Cell,
  SwipeCell,
  PullRefresh,
  Tag,
  Popup,
  Button,
  TreeSelect,
  Notify,
  Search,
  Dialog,
} from "vant";
import {
  GetAddTestList,
  GetAddButtonPower,
  BatchOperateAddTestByIds,
} from "@/api/check";
export default {
  name: "applynAddTesting",
  components: {
    [Field.name]: Field,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [List.name]: List,
    [Cell.name]: Cell,
    [PullRefresh.name]: PullRefresh,
    [Tag.name]: Tag,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [TreeSelect.name]: TreeSelect,
    [SwipeCell.name]: SwipeCell,
    [Col.name]: Col,
    [Row.name]: Row,
    [Notify.name]: Notify,
    [Search.name]: Search,
    [Dialog.name]: Dialog,
  },
  data() {
    return {
      title: "报告更新管理",
      isRouterAlive: true,
      materialType: "",
      materialCode: "",
      emergencyDegree: "",
      showFiltering: false,
      list: [],
      loading: false,
      finished: false,
      error: false,
      token: "",
      finished: false,
      showPdf: false,
      pdfh5: null,
      showTextarea: false,
      testId: "",
      failMsg: "",
      token: "",
      searchValue: "",
      isAdd: true,
    };
  },
  watch: {},
  created() {
    this.token = localStorage.getItem("tokenKey");
    this.fetchList(null);
    this.JudgeButtonFun();
  },
  methods: {
    JudgeButtonFun() {
      var _this = this;
      var params = { Token: this.token };
      GetAddButtonPower(params)
        .then((response) => {
          if (response.ErrorCode == "0") {
            var res = response.Result;
            if (res == false) {
              _this.isAdd = false;
            } else {
              _this.isAdd = true;
            }
          }
        })
        .catch(() => {});
    },
    fetchList() {
      var seaVal = this.searchValue;
      var queryParams = {
        Rows: "",
        Page: 1,
        BillType: 2,
        KeyWord: seaVal,
        Token: this.token,
      };
      GetAddTestList(queryParams)
        .then((response) => {
          const { Result } = response;
          const { rows, total } = Result;
          this.list = rows;
          if (this.list.length == 0) {
            this.finished = true;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.error = true;
        });
    },
    clickLeft() {
      this.$router.replace({ name: "home" });
    },
    clickRight() {
      this.showFiltering = true;
    },
    toAddTestInfo() {
      this.$router.push({
        name: "addReportUpdateInfo",
      });
    },
    onSearch() {
      this.fetchList(null);
    },
    callBack(v) {
      var iautoid = v.iautoid;
      var params = {
        Token: this.token,
        iautoid,
        Ids: [iautoid],
        OperateType: 1,
      };
      Dialog.confirm({
        message: "确定撤回吗？",
      })
        .then(() => {
          BatchOperateAddTestByIds(params)
            .then((response) => {
              if (response.ErrorCode == "0") {
                this.fetchList();
              }
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    deleteInfo(v) {
      var iautoid = v.iautoid;
      var params = {
        Token: this.token,
        iautoid,
        Ids: [iautoid],
        OperateType: 3,
      };
      Dialog.confirm({
        message: "确定删除吗？",
      })
        .then(() => {
          BatchOperateAddTestByIds(params)
            .then((response) => {
              if (response.ErrorCode == "0") {
                this.fetchList();
              }
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    submitInfo(v) {
      this.$router.push({
        name: "addUpdateContentInfo",
        params: v,
      });
    },
    rejectInfo(v) {
      var iautoid = v.iautoid;
      var params = {
        Token: this.token,
        iautoid,
        Ids: [iautoid],
        OperateType: 2,
      };
      Dialog.confirm({
        message: "确定驳回吗？",
      })
        .then(() => {
          BatchOperateAddTestByIds(params)
            .then((response) => {
              if (response.ErrorCode == "0") {
                this.fetchList();
              }
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
.rejectPopup .van-icon {
  top: 8px !important;
  right: 10px !important;
  font-size: 20px;
}
</style>

<style lang="less" scoped>
// /deep/ .van-field__body {
//   border: 1px solid #ccc;
// }

.search /deep/.van-field__left-icon {
  margin-right: 0.22rem;
}

/deep/.van-search__content {
  padding-left: 0;
}

/deep/.van-search .van-cell {
  background-color: #fff;
}
/deep/.van-field__control[type="search"] {
  padding-left: 10px;
}
.nav-bar {
  background-color: #3eb4f8;
}
.ty-container {
  // min-height: 100vh;
  -webkit-overflow-scrolling: touch;
  background-color: @background-color;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  position: relative;
  .content {
    box-sizing: border-box;
    padding-top: 1rem;
    height: 100%;
    overflow: auto;
  }
  .addBtn {
    z-index: 999;
    width: 36px;
    height: 36px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1e9fff;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    .van-icon {
      font-size: 16px;
      color: #fff;
    }
  }
}

.custom-title {
  flex: 1;
  width: 0;
  .custom-label > div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.custom-value {
  flex: none;
}

.van-tree-select {
  margin-top: 44px;
}

.van-popup__left-button-box {
  position: absolute;
  left: 14px;
  top: 13px;
}
.popup-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  // .popup-content__content,
  // .popup-content__footer {
  //   // overflow: auto;
  // }
  .popup-content__content textarea {
    width: 100%;
    border: 1px solid #ccc;
  }
  .popup-content__footer {
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    button {
      height: 30px;
    }
  }
}
</style>